<template>
    <l-page class="block h-full" customClass="h-full flex flex-col overflow-hidden">
        <l-navbar :title="title">
        </l-navbar>
        <view class="bg-white shadow border-t border-gray-200">
            <u-tabs :list="navlist" @change="change" :scrollable="false" :current="is_ysf"></u-tabs>
        </view>

        <template v-for="item in navlist" :key="item.name">
            <l-swiper :class="{ 'flex-1': true, 'hide': is_ysf !== item.value }" ref="swiper"
                v-if="pages.includes(item.value)" :request="getAjax(item.value)">
                <template #default="{ list }">
                    <card v-for="minItem in list" :key="minItem.id" :item="minItem"
                        :toUrl="`/pages/application-record/${getUrl(item.value)}?loan_id=${minItem.id}&is_ywy=0`"
                        :is_ysf="is_ysf" />
                </template>
            </l-swiper>
        </template>
        <view class="p-3 bg-white border-t border-gray-200">
            <navigator url="/pages/application-record/business-orders" class="rounded-full overflow-hidden">
                <u-button type="primary" icon="edit-pen-fill" text="去工作台"></u-button>
            </navigator>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import Loan from "@/stores/loan";
import Order from "@/stores/order";
import card from "./components/order-card.vue";

const is_ysf = ref(0), loan = Loan(), order = Order(), { 订单状态 } = loan, pages = ref([0]);

let navlist = ['咨询申请', '房贷咨询'].map((item: any, idx: number) => ({ name: item, value: idx }))

let title = ref('')

const change = (val: any) => {
    is_ysf.value = val.value;
    pages.value.push(val.value)
}

const getAjax = (is_ysf: number) => {
    return is_ysf == 1 ? order.ysf_apply_history : order.apply_history;
}
const getUrl = (is_ysf: number) => {
    return is_ysf == 1 ? 'ysf-detail' : 'detail';
}
const swiper = ref([])
onShow(() => {
    swiper.value.forEach((item: any) => item.onRefresh())
})
onLoad((option: any) => {
    title.value = '咨询列表'
})

</script>
<style scoped lang="scss">
.hide {
    position: absolute;
    left: 110%;
}
</style>